<template>
  <div>
    <div class="itemTitle itemFlex">
      <div>{{name}}123</div>
      <el-button type="text" @click="dialogVisible = true;fetchData()">销售详情</el-button>
    </div>
    <div class="score">
      <span>销售量 {{count}} 件</span>
      <span>销售额 {{amount}} 万元</span>
    </div>
    <div class="pieColumn">
      <div :id="'pie1' + productionId" style="height: 160px"></div>
      <div :id="'pie2' + productionId" style="height: 160px"></div>
    </div>
    <modelDetailDialog :productionId='productionId' :startDate='startDate' :endDate='endDate' />
    <el-dialog title="详细信息" :visible.sync="dialogVisible" width="100%">
      <div>
        <div class="itemContainer">
          <div class="itemTitle">
            <span>公司内部销售走势</span>
          </div>
          <div :id="'saleSummaryChart' + productionId" style="height: 300px"></div>
        </div>
        <div class="priceDetail">
          <div class="">
            <div class="itemTitle">
              <span>价格段销售分析</span>
            </div>
            <div :id="'salePricePie' + productionId" style="height: 300px"></div>
          </div>
          <div>
            <div class="itemTitle">
              <span>价格段销售分析</span>
            </div>
            <el-table :data="data" style="width: 100%">
              <el-table-column
                prop="model"
                label="产品型号">
              </el-table-column>
              <el-table-column
                prop="type"
                label="所属品类">
              </el-table-column>
              <el-table-column
                prop="percent"
                label="销量在品类占比">
              </el-table-column>
              <el-table-column
                sortable
                prop="count"
                label="销售量">
              </el-table-column>
              <el-table-column
                sortable
                prop="price"
                label="销售均价">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
 import modelDetailDialog from './modelDetailDialog'

 export default {
    name: 'catagory-item',
    components: {
      modelDetailDialog,
    },
    data() {
      return ({
        dialogVisible: false,
        data: [],
      })
    },
    props: ['productionId', 'name', 'count', 'amount', 'amountPercent', 'amountChangePercent', 'countPercent', 'countChangePercent', 'startDate', 'endDate'],
    mounted() {
      this.darwPie(this.amountPercent, this.countPercent, this.amountChangePercent, this.countChangePercent)
    },
    methods: {
      darwPie(amountPercent, countPercent, amountChangePercent, countChangePercent){
        this.myChartPie1 = this.$echarts.init(document.getElementById('pie1'+ this.productionId))
        this.myChartPie2 = this.$echarts.init(document.getElementById('pie2'+ this.productionId))
        const options = {
          series: [{
            name:'访问来源',
            type:'pie',
            radius: ['80%', '90%'],
            hoverAnimation: false,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true,
                    position: 'center',
                    formatter : `占比：${amountPercent}%\n 环比：{c|${amountChangePercent}%}`,
                    color: 'black',
                    lineHeight: 16,
                    fontSize: 12,
                    verticalAlign: 'bottom',
                    rich: {
                      c: {
                        color: amountChangePercent > 0 ? 'red' : 'green',
                        lineHeight: 16,
                        fontSize: 12,
                      }
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:amountPercent, name:'营业额', itemStyle: { color: '#FEA08B'}},
                {value:100-amountPercent, name:'others', label: { show: false }, itemStyle: { color: '#9393AA'}}
            ]
        }]
        }
        const options1 = {
          series: [{
            name:'访问来源',
            type:'pie',
            radius: ['80%', '90%'],
            hoverAnimation: false,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true,
                    position: 'center',
                    formatter : `占比：${countPercent}%\n 环比：{c|${countChangePercent}%}`,
                    color: 'black',
                    lineHeight: 16,
                    fontSize: 12,
                    verticalAlign: 'bottom',
                    rich: {
                      c: {
                        color: countChangePercent > 0 ? 'red' : 'green',
                        lineHeight: 16,
                        fontSize: 12,
                      }
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:countPercent, name:'营业额', itemStyle: { color: '#4ED192'}},
                {value:100-countPercent, name:'others', itemStyle: { color: '#9393AA'}}
            ]
        }]
        }

        this.myChartPie1.setOption(options);
        this.myChartPie2.setOption(options1);
      },
      fetchData(startDate, endDate) {
          this.$http.get('/front/saleDetailE', {
            params: { startDate, endDate }
          }).then(res => {
            this.data = res.data.salePriceData[0].saleDetail;
            this.saleSummaryChart = this.$echarts.init(document.getElementById('saleSummaryChart'+ this.productionId))
            const option = {
              legend: {
                  data:['销量']
              },
              xAxis: {
                  data: res.data.saleTrend.map(item => item.month)
              },
              yAxis: [{
                name: '销售量（万件）',
                type: 'value'
              }, {
                name: '销售额（万元）',
                type: 'value'
              }],
              series: [{
                  name: '销售量',
                  type: 'line',
                  yAxisIndex: 0,
                  smooth:true,
                  itemStyle: {
                    color: '#B0ACEC'
                  },
                  data: res.data.saleTrend.map(item => item.count)
              }, {
                  name: '销售额',
                  type: 'line',
                  smooth:true,
                  itemStyle: {
                    color: '#9DD6F9'
                  },
                  yAxisIndex: 1,
                  data: res.data.saleTrend.map(item => item.amount)
              }]
            };
            this.saleSummaryChart.setOption(option);
            this.salePricetPie = this.$echarts.init(document.getElementById('salePricePie'+ this.productionId));
            const pieOptions = {
              series: [{
                name:'访问来源',
                type:'pie',
                radius: [0, '90%'],
                hoverAnimation: false,
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: true,
                        position: 'outline',
                        formatter : '{b}'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: res.data.salePriceData.map(item => ({
                  name: `${item.price}-${item.count}`,
                  value: item.percent
                }))
              }]
            }

            this.salePricetPie.setOption(pieOptions);
          })
      }
    }
 }
</script>

<style scoped lang="less">
	.itemTitle {
		border-bottom: 1px solid #EEEEEE;
		height: 40px;
		line-height: 20px;
		padding: 10px;
	}
	.itemFlex {
		display: flex;
		justify-content: space-between;
	}
	.score {
		padding: 10px;
	}
	.pieColumn {
		display: flex;
		margin: 0 10px;
	}
	.pieColumn > div {
		flex: 1;
	}
	.link {
		text-align: center;
		color: #3AAAEC;
		margin: 0 10px;
		border-top: 1px solid #EEEEEE;
		line-height: 30px;
		font-size: 16px;
	}
  .priceDetail {
    display: flex;
    > div {
      flex: 1;
      margin: 10px;
      flex-basis: 50%;
    }
  }
</style>
